<template>
  <div class="background">
    <div class="container">
      <div class="qu-wrap">
        <el-row style="margin-bottom: 10px">
          <el-col :span="4">
            <el-page-header @back="goBack"></el-page-header>
          </el-col>
          <el-col :span="16" style="display: inline-block;text-align: center;">
            <input v-model="surveyTitle" class="surveyInfo" type="text" disabled style="font-size: 28px;font-weight: bold">
            </input>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row style="padding-top: 20px">
          <el-col :span="24" style="text-align: center">
            <input v-model="surveyIntroduction" class="surveyInfo" type="text" disabled style="color: #595959;text-decoration: #666666"></input>
          </el-col>
        </el-row>

        <div class="preview-qu-content">
          <section class="qu-item" v-for="(item, index) in questions">
            <h3>
              <span class="qu-num" >{{`${index + 1}`+"、"}}</span>
              <span class="qu-topic" v-if="item.type === 0">{{`[单选] ${item.content}`}}</span>
              <span class="qu-topic" v-if="item.type === 1">{{`[文本] ${item.content}`}}</span>
              <span class="qu-topic" v-if="item.type === 2">{{`[多选] ${item.content}`}}</span>
              <span v-if="item.must==1" style="color: #ff0000"> *</span>
            </h3>
            <template v-if="item.type === 1">
              <el-input v-model="item.textContent" type="textarea" :autosize="{minRows: 3}" clearable resize="vertical" style="width: 700px" ></el-input>
            </template>
            <ul v-else class="options-list" >
              <li v-for="(option, optIndex) in item.optionContent">
              <span v-if="item.type===0">
<!--                <el-radio v-if="item.answer===optIndex" v-model="item.answer" :label="optIndex" aria-checked="true"></el-radio>-->
                <el-radio v-model="item.answer" :label="optIndex">{{''}}</el-radio>
              </span>
                <span v-if="item.type===2" style="padding-right: 10px">
                <el-checkbox></el-checkbox>
              </span>
                <span>{{ option }}</span>
              </li>
            </ul>
            <div></div>
          </section>
          <el-row v-if="this.questions.length===1" style="height: 210px">
            <el-col :span="24"></el-col>
          </el-row>
          <el-row v-if="this.questions.length===2" style="height: 100px">
            <el-col :span="24"></el-col>
          </el-row>
        </div>

        <div style="padding-top: 20px">
          <el-row :span="24" align="middle" justify="space-between" type="flex">
            <el-col :span="24" style="text-align: center;">
              <el-button size="medium" type="primary" @click="submitSurvey()">提交问卷</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Preview',
  data() {
    return {
      surveyId: '',
      surveyTitle: '',
      surveyIntroduction: '',
      questions: [],
      goBackDialogVisible: false,
    }
  },

  created() {
    let survey = JSON.parse(window.sessionStorage.getItem("surveyInfo"))
    this.surveyTitle = survey.title
    this.surveyIntroduction = survey.introduction
    this.surveyId = survey.id
    this.questions = JSON.parse(window.sessionStorage.getItem("questionArray"))
    // 无后端时用的死数据
    // this.questions = JSON.parse("[{\"type\":0,\"content\":\"请输入题目\",\"optionContent\":[\"选项1\",\"选项2\",\"选项3\",\"选项4\"]},{\"type\":2,\"content\":\"请输入题目\",\"optionContent\":[\"选项1\",\"选项2\",\"选项3\",\"选项4\"]},{\"type\":1,\"content\":\"请输入题目\",\"must\":0}]")
    // let i = 0;
    // for (i;i<this.questions.length;i++){
    //   this.questions[i].answer = null
    // }
    // console.log(this.questions)
    window.sessionStorage.removeItem("surveyInfo")
    window.sessionStorage.removeItem("questionArray")

    // console.log(this.startTime)
    // console.log(this.endTime)

  },


  methods: {
    // test() {
    //   this.$message("oiuasdhf")
    // },
    goBack () {
      this.$router.push({path: "/user/survey"})//TODO:待更改
    },
    submitSurvey() {
      this.$message.success("问卷预览，不做实际提交哦")
      console.log(this.questions)
    }
  },

}

</script>

<style>
@import "../../../style/questionnaireStyle/style.css";
.surveyInfo{
  width: 500px;
  height: 30px;
  color: #000000;
  background-color: #fff;
  border: none;
  border-bottom: 1px;
  outline: none;
  text-align: center;
  font-size: 20px;
}
.background{
  background-image: url("../../../assets/answerbackground.png");
  background-size: 100% 100%;
  margin: 0;
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-qu-content {
  padding: 2rem;
  border-top: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.preview-qu-content .qu-item {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 2rem;
}
/*.preview-qu-content .qu-item:hover {*/
/*  background-color: #fcf0e5;*/
/*}*/
/*.preview-qu-content .qu-item:hover .operat-list {*/
/*  display: flex;*/
/*}*/
/*.preview-qu-content .qu-item:hover div:last-of-type {*/
/*  display: none;*/
/*}*/
/*.preview-qu-content .qu-item:hover #require-check {*/
/*  display: block;*/
/*}*/
.preview-qu-content .qu-item h3 {
  height: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2rem;
}
.preview-qu-content .qu-item h3 > input {
  display: none;
  width: 15rem;
  height: 2rem;
  font-size: 1.4rem;
  border: none;
  outline: none;
  background-color: #fff;
}
.preview-qu-content .qu-item div:last-of-type {
  height: 2rem;
}
.preview-qu-content .qu-item .qu-num {
  display: inline-block;
  width: 2rem;
  margin-right: 0rem;
}
.preview-qu-content .qu-item.nowEditing .qu-topic {
  display: none;
}
.preview-qu-content .qu-item.nowEditing h3 > input {
  display: inline-block;
}
.preview-qu-content .qu-item.optEditing .optionEditing .optionText {
  display: none;
}
.preview-qu-content .qu-item.optEditing .optionEditing > input {
  display: inline-block;
}
.preview-qu-content .options-list > li {
  height: 2rem;
  margin: 1rem 0 0 4rem;
  line-height: 2rem;
}
.preview-qu-content .options-list > li:hover ul {
  display: inline-flex;
  margin-left: 2rem;
}
.preview-qu-content .options-list > li:hover li {
  margin-left: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.preview-qu-content .options-list > li:hover li:hover {
  color: #409EFF;
}
.preview-qu-content .options-list > li > ul {
  display: none;
}
.preview-qu-content .options-list > li > input {
  display: none;
  width: 15rem;
  height: 2rem;
  font-size: 1.4rem;
  border: none;
  outline: none;
  background-color: #fff;
}
.preview-qu-content textarea {
  margin: 1rem 0 0 4rem;
  resize: none;
}
.preview-qu-content .operat-list {
  display: none;
  height: 2rem;
  justify-content: flex-end;
  padding-top: 120px;
  padding-left: 50px;
}
.preview-qu-content .operat-list li {
  margin-right: 1rem;
  cursor: pointer;
}
.preview-qu-content .operat-list li:hover {
  color: #409EFF;
}

</style>
